<template>
  <div v-loading="loading">
    <div class="flex-between mb-10">
      <div></div>
      <el-space size="default">
        <el-button type="primary" icon="Plus" @click="showAppend"
          >创建组员</el-button
        >
        <el-button icon="Share" @click="onExport">导出小组成绩</el-button>
      </el-space>
    </div>
    <common-table :table-type="membertableType" :table-data="tableData">
      <template #operation>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="showDetail(row)">
              详情
            </el-button>
            <el-button
              :disabled="row.acc === userAcc"
              link
              type="primary"
              @click="showEditor(row)"
            >
              设置角色
            </el-button>
            <el-button
              :disabled="row.acc === userAcc"
              link
              type="danger"
              @click="onDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </template>
    </common-table>
    <MemberFormDialog ref="MemberFormDialogRef" @refresh="refresh" />
    <MemberDetailDrawer ref="MemberDetailDrawerRef" />
  </div>
</template>

<script setup lang="ts">
import MemberFormDialog from "./MemberFormDialog.vue";
import MemberDetailDrawer from "./MemberDetailDrawer.vue";
import { computed, onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "@/api";
import { membertableType } from "./utils";
import { downloadByBlob } from "@/utils/index";

const userAcc = localStorage.getItem("userAcc") as string;

const MemberDetailDrawerRef = ref();

const MemberFormDialogRef = ref();

const loading = ref(false);
const tableData = ref<any[]>([]);

const groupId = computed(
  () => tableData.value.filter((v) => v.acc === userAcc)?.[0]?.groupId
);

/*
 * Static state
 * */
function getTableData(val: string) {
  loading.value = true;
  api.groupDetail.selectGroupByID(val).then((res: any) => {
    if (res.success) {
      tableData.value = res.data;
    }
    loading.value = false;
  });
}

//Delete
function onDelete(row: any) {
  ElMessageBox.confirm(`确认删除 ${row.name || ""} 组员吗?`, "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      api.groupDetail.deleteGroupDetail(row.id).then((res: any) => {
        ElMessage({
          message: res.message,
          type: res.success ? "success" : "error",
          grouping: true,
          showClose: true,
        });
        refresh();
      });
    })
    .catch(() => {});
}

// Append
function showAppend() {
  MemberFormDialogRef.value.open(groupId.value);
}
// Editor
function showEditor(row: any) {
  MemberFormDialogRef.value.open(groupId.value, row);
}

function showDetail(row: any) {
  MemberDetailDrawerRef.value.open(row);
}

function refresh() {
  getTableData(userAcc);
}

onMounted(() => {
  getTableData(userAcc);
});

function onExport() {
  loading.value = true;
  api.group
    .exportExcel(userAcc)
    .then((response) => {
      downloadByBlob(response, `小组成绩单.xlsx`);

      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
</script>
